<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

</head>
<body >
    <div id="chart_111" class="chart-container" style="width:1244px; height:555px; "></div>
    <script>
        var chart_chart_111 = echarts.init(
            document.getElementById('chart_111'), 'white', {renderer: 'canvas'});
            
        chart_chart_111.on('click',function(params){
            var z = [['冀凯股份', '爱慕股份', '金安国纪'], ['冀凯股份'], ['冀凯股份'], ['电光科技', '兴业股份'], ['兴业股份'], ['冀东装备'], ['新炬网络'], ['新炬网络'], ['新炬网络'], ['新炬网络'], ['新炬网络'], ['新炬网络'], ['梦网科技', '杭钢股份'], ['梦网科技', '杭钢股份'], ['杭钢股份'], ['威派格  '], ['杭齿前进'], ['杭齿前进'], ['杭齿前进'], ['新时达']];
            var zc = [['002691', '603511', '002636'], ['002691'], ['002691'], ['002730', '603928'], ['603928'], ['000856'], ['605398'], ['605398'], ['605398'], ['605398'], ['605398'], ['605398'], ['002123', '600126'], ['002123', '600126'], ['600126'], ['603956'], ['601177'], ['601177'], ['601177'], ['002527']];
            var index = params.dataIndex;
            xdata = params.data[0];
            if(xdata == null){
                return '';
            }
            if(params.seriesName != '连扳高度'){
               return '';
            }
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8001/v1/scqx?codes='+zc[index].join(','));
            xhr.send();
            console.log(params.name);
        });
    
        var option_chart_111 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#87CEFA",
        "orange",
        "red",
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "line",
            "name": "\u8fde\u6273\u9ad8\u5ea6",
            "connectNulls": false,
            "xAxisIndex": 0,
            "yAxisIndex": 0,
            "symbol": "emptyCircle",
            "symbolSize": 10,
            "showSymbol": true,
            "smooth": false,
            "clip": true,
            "step": false,
            "data": [
                [
                    "2025-01-20",
                    5
                ],
                [
                    "2025-01-21",
                    6
                ],
                [
                    "2025-01-22",
                    7
                ],
                [
                    "2025-01-23",
                    5
                ],
                [
                    "2025-01-24",
                    6
                ],
                [
                    "2025-01-27",
                    6
                ],
                [
                    "2025-02-05",
                    5
                ],
                [
                    "2025-02-06",
                    6
                ],
                [
                    "2025-02-07",
                    7
                ],
                [
                    "2025-02-10",
                    8
                ],
                [
                    "2025-02-11",
                    9
                ],
                [
                    "2025-02-12",
                    10
                ],
                [
                    "2025-02-13",
                    7
                ],
                [
                    "2025-02-14",
                    8
                ],
                [
                    "2025-02-17",
                    9
                ],
                [
                    "2025-02-18",
                    6
                ],
                [
                    "2025-02-19",
                    6
                ],
                [
                    "2025-02-20",
                    7
                ],
                [
                    "2025-02-21",
                    8
                ],
                [
                    "2025-02-24",
                    6
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "margin": 8
            },
            "logBase": 10,
            "seriesLayoutBy": "column",
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "markPoint": {
                "label": {
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                },
                "data": [
                    {
                        "type": "max"
                    }
                ]
            },
            "markLine": {
                "silent": false,
                "precision": 2,
                "label": {
                    "show": true,
                    "margin": 8
                },
                "lineStyle": {
                    "show": true,
                    "width": 2,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "orange"
                },
                "data": [
                    {
                        "type": "average"
                    }
                ]
            },
            "zlevel": 0,
            "z": 0
        },
        {
            "type": "line",
            "name": "\u6b21\u9ad8\u5ea6",
            "connectNulls": false,
            "xAxisIndex": 0,
            "yAxisIndex": 0,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "clip": true,
            "step": false,
            "data": [
                [
                    "2025-01-20",
                    3
                ],
                [
                    "2025-01-21",
                    4
                ],
                [
                    "2025-01-22",
                    5
                ],
                [
                    "2025-01-23",
                    4
                ],
                [
                    "2025-01-24",
                    5
                ],
                [
                    "2025-01-27",
                    4
                ],
                [
                    "2025-02-05",
                    3
                ],
                [
                    "2025-02-06",
                    4
                ],
                [
                    "2025-02-07",
                    5
                ],
                [
                    "2025-02-10",
                    6
                ],
                [
                    "2025-02-11",
                    7
                ],
                [
                    "2025-02-12",
                    8
                ],
                [
                    "2025-02-13",
                    4
                ],
                [
                    "2025-02-14",
                    5
                ],
                [
                    "2025-02-17",
                    5
                ],
                [
                    "2025-02-18",
                    5
                ],
                [
                    "2025-02-19",
                    3
                ],
                [
                    "2025-02-20",
                    4
                ],
                [
                    "2025-02-21",
                    5
                ],
                [
                    "2025-02-24",
                    4
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "margin": 8
            },
            "logBase": 10,
            "seriesLayoutBy": "column",
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "zlevel": 0,
            "z": 0
        },
        {
            "type": "line",
            "name": "\u4e0a\u6da8\u6570\u91cf",
            "connectNulls": false,
            "xAxisIndex": 0,
            "yAxisIndex": 1,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "clip": true,
            "step": false,
            "data": [
                [
                    "2025-01-20",
                    3514
                ],
                [
                    "2025-01-21",
                    1898
                ],
                [
                    "2025-01-22",
                    1002
                ],
                [
                    "2025-01-23",
                    2218
                ],
                [
                    "2025-01-24",
                    3783
                ],
                [
                    "2025-01-27",
                    1783
                ],
                [
                    "2025-02-05",
                    3304
                ],
                [
                    "2025-02-06",
                    4537
                ],
                [
                    "2025-02-07",
                    3908
                ],
                [
                    "2025-02-10",
                    3888
                ],
                [
                    "2025-02-11",
                    1624
                ],
                [
                    "2025-02-12",
                    3377
                ],
                [
                    "2025-02-13",
                    1115
                ],
                [
                    "2025-02-14",
                    2306
                ],
                [
                    "2025-02-17",
                    3464
                ],
                [
                    "2025-02-18",
                    695
                ],
                [
                    "2025-02-19",
                    4388
                ],
                [
                    "2025-02-20",
                    3169
                ],
                [
                    "2025-02-21",
                    2691
                ],
                [
                    "2025-02-24",
                    2659
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "margin": 8
            },
            "logBase": 10,
            "seriesLayoutBy": "column",
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "zlevel": 0,
            "z": 0
        }
    ],
    "legend": [
        {
            "data": [
                "\u8fde\u6273\u9ad8\u5ea6",
                "\u6b21\u9ad8\u5ea6",
                "\u4e0a\u6da8\u6570\u91cf"
            ],
            "selected": {
                "\u6b21\u9ad8\u5ea6": false,
                "\u4e0a\u6da8\u6570\u91cf": false
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "formatter":                     function(params){                        var index = params.dataIndex;                        xdata = params.data[0];                        var plateliststr = [];                        if(xdata == null){                          return '';                        }                        if (params.seriesName == '\u8fde\u6273\u9ad8\u5ea6'){                            var z = [['\u5180\u51ef\u80a1\u4efd', '\u7231\u6155\u80a1\u4efd', '\u91d1\u5b89\u56fd\u7eaa'], ['\u5180\u51ef\u80a1\u4efd'], ['\u5180\u51ef\u80a1\u4efd'], ['\u7535\u5149\u79d1\u6280', '\u5174\u4e1a\u80a1\u4efd'], ['\u5174\u4e1a\u80a1\u4efd'], ['\u5180\u4e1c\u88c5\u5907'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u65b0\u70ac\u7f51\u7edc'], ['\u68a6\u7f51\u79d1\u6280', '\u676d\u94a2\u80a1\u4efd'], ['\u68a6\u7f51\u79d1\u6280', '\u676d\u94a2\u80a1\u4efd'], ['\u676d\u94a2\u80a1\u4efd'], ['\u5a01\u6d3e\u683c  '], ['\u676d\u9f7f\u524d\u8fdb'], ['\u676d\u9f7f\u524d\u8fdb'], ['\u676d\u9f7f\u524d\u8fdb'], ['\u65b0\u65f6\u8fbe']];                            var zc = [['002691', '603511', '002636'], ['002691'], ['002691'], ['002730', '603928'], ['603928'], ['000856'], ['605398'], ['605398'], ['605398'], ['605398'], ['605398'], ['605398'], ['002123', '600126'], ['002123', '600126'], ['600126'], ['603956'], ['601177'], ['601177'], ['601177'], ['002527']];                               return                             '<br/><div style=\"font-size: 20px;font-weight: bold;color:red;\">' + params.seriesName + '</div>' +                             '<br/><div style=\"font-size: 13px;font-weight: bold;\">\u6da8\u505c\u65f6\u95f4\uff1a' + params.data[0] + '</div>' +                             '<br/><div style=\"font-size: 13px;font-weight: bold;\">\u8fde\u6273\u9ad8\u5ea6\uff1a' + params.data[1] + '\u8fde\u6273</div>' +                             '<br/><div style=\"font-size: 13px;font-weight: bold;\">\u80a1\u7968\u4ee3\u7801\uff1a' + zc[index].join(',')+ '</div>' +                             '<br/><div style=\"font-size: 13px;font-weight: bold;\">\u80a1\u7968\u540d\u79f0\uff1a' + z[index].join(',')+ '</div>';                        }else if(plateliststr.length > 0 && params.seriesName == plateliststr[0]){                             var platejslist = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];                             var platejsindedxlist = platejslist[index];                             let keys = Object.keys(platejsindedxlist);                             keys.sort().reverse();                             var result = '';                             result += '<br/><div style=\"font-size: 20px;font-weight: bold;color:red;\">' + params.seriesName + '</div>';                             for(let key of keys){                                let value = platejsindedxlist[key];                                if(key == 1 && value.length>6){                                    result += '<br/><div style=\"font-size: 13px;font-weight: bold;\">\u9996\u677f\uff1a' + value.length + '</div>';                                }else{                                    result += '<br/><div style=\"font-size: 13px;font-weight: bold;\">'+ key +'\u677f\uff1a' + value.join(',') + '</div>';                                }                             }                             return result;                        }                        else{                            return '';                        }                    }                    ,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "2025-01-20",
                "2025-01-21",
                "2025-01-22",
                "2025-01-23",
                "2025-01-24",
                "2025-01-27",
                "2025-02-05",
                "2025-02-06",
                "2025-02-07",
                "2025-02-10",
                "2025-02-11",
                "2025-02-12",
                "2025-02-13",
                "2025-02-14",
                "2025-02-17",
                "2025-02-18",
                "2025-02-19",
                "2025-02-20",
                "2025-02-21",
                "2025-02-24"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        {
            "type": "value",
            "name": "\u6da8\u8dcc",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "position": "right",
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        {
            "type": "value",
            "name": "\u6da8\u8dcc",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "position": "right",
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "show": true,
            "text": "\u5e02\u573a\u60c5\u7eea",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_chart_111.setOption(option_chart_111);
    </script>
</body>
</html>
